<!--公开课--梁兆兴2019-5-6-->
<template lang="pug">
  kalix-master
    div.box
      div.top
        // 公开课条件筛选
        div.classify.clearfix
          span 所属院系
          ul
            li(v-for="(item, index) in faculty") {{item}}
        div.classify.clearfix
          span 所属专业
          ul
            li(v-for="(item, index) in major") {{item}}
        div.classify.clearfix
          span 课程类别
          ul
            li(v-for="(item, index) in sort") {{item}}
        div.classify.clearfix
          span 课程分类
          ul
            li(v-for="(item, index) in classify") {{item}}
        div.classify.clearfix
          span 课时
          ul
            li(v-for="(item, index) in hour") {{item}}
        div.classify.clearfix
          span 学分
          ul
            li(v-for="(item, index) in credit") {{item}}
        div.classify.clearfix
          span 课程年份
          ul
            li(v-for="(item, index) in lessonYear") {{item}}
    div.xian
    //  公开页课程
    div.content.box
      div.option
        Sort
        div.condition
          span 已选条件:
          div.conditionBox 条件1
            span ×
          div.conditionBox 条件2
            span ×
        div.videoK
          div.videoBox(v-for="item in course" :data="course.slice((currentPage-1)*pagesize,currentPage*pagesize)")
            router-link(:to="{name: 'VideoPage'}")
              div.videoImg
                img(:src="item.img" width="170px" height="120px")
                span.hour {{item.hour}}
                span.credit {{item.credit}}
              p.courseTitle {{item.courseTitle}}
              p.coursebrief {{item.coursebrief}}
            router-link(to="{name: 'LiveMore'}").more 查看更多→
        div.paging
          el-pagination(
          @size-change="handleSizeChange"
          @current-change="current_change"
          :page-size="100"
          layout="prev, pager, next, total, jumper"
          :total="total")
</template>

<script>
  export default {
    data() {
      return {
        course: [
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介撒旦所阿达大大萨达萨达萨达奥术大师啊撒打打萨达阿萨德奥术大师'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          }
        ],
        index: '',
        total: 1000, // 默认数据总数
        pagesize: 10, // 每页的数据条数
        currentPage: 1, // 默认开始页面
        faculty: ['院系1', '院系2', '院系3', '院系4', '院系5', '院系6', '院系7', '院系8', '院系9', '院系11'], // 所属院系
        major: ['专业1', '专业2', '专业3', '专业4', '专业5', '专业6', '专业7', '专业8', '专业9', '专业11'], // 所属专业
        sort: ['院系1', '院系2', '院系3', '院系4', '院系5', '院系6', '院系7', '院系8', '院系9', '院系11'], // 课程类别
        classify: ['公开课', '精品课', '私播课', '直播课', '院系5', '院系6', '院系7', '院系8', '院系9', '院系11'], // 课程分类
        hour: ['院系1', '院系2', '院系3', '院系4', '院系5', '院系6', '院系7', '院系8', '院系9', '院系11'], // 课时
        credit: ['1', '3', '5', '7', '9', '11', '13', '15', '17', '19'], // 学分
        lessonYear: ['2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021', '2022', '2023'] // 课程年份
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      current_change: function (currentPage) {
        this.currentPage = currentPage
      },
      getClear() { // 综合排序，清空
        this.index = 1
      },
      getUpdateDate() {
        this.index = 2
      },
      getHits() { // 按照点击率进行排序
        this.index = 3
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 0 auto

  .top
    width 100%
    height 286px

  .classify
    margin-top 20px
    span
      display inline-block
      width 70px
      float left
      text-align right
      margin-right 38px
    ul
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
    li
      display inline-block
      width 70px
      text-align center
      float left
      margin 0 10px
      cursor pointer

  .xian
    width 100%
    height 5px
    box-shadow 0px 7px 7px #999

  .content
    margin-top 20px

  .condition
    display inline-block
    margin-left 25px
    width 800px
    span
      font-size 20px
      margin-right 26px

  .conditionBox
    display inline-block
    width 120px
    height 40px
    line-height 40px
    border 1px solid #FEC285
    border-radius 21px
    color #999999
    font-size 19px
    padding-left 23px
    box-sizing border-box
    margin-right 20px
    span
      margin-left 10px

  .videoK
    width 100%
    height 900px
    margin-top 20px
    .videoBox
      width 170px
      height 250px
      display inline-block
      margin 0 14px 20px 14px
      position relative
    .videoImg
      position relative
    .hour
      position absolute
      bottom 10px
      right 64px
      width 46px
      height 18px
      line-height 18px
      border-radius 11px
      text-align center
      background rgba(0, 0, 0, 0.5)
      color #fff
      font-size 12px
    .credit
      position absolute
      bottom 10px
      right 10px
      width 46px
      height 18px
      line-height 18px
      border-radius 11px
      text-align center
      background rgba(0, 0, 0, 0.5)
      color #fff
      font-size 12px
    .courseTitle
      font-size 18px
      margin 15px 0
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 1
    .coursebrief
      color #999
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 3
      font-size 13px
      height 40px
    .more
      color #33A2FB
      position absolute
      bottom 10px
      left 0
    .more:hover
      text-decoration underline

  .Greens
    color #008F95 !important

  .option
    position relative

  .paging
    position absolute
    left 50%
    bottom 10px
    transform translateX(-50%)

</style>
